<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Easy Slider jQuery Plugin Demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.5.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				controlsBefore:	'<p id="controls">',
				controlsAfter:	'</p>',
				auto: true, 
				continuous: true
			});
			$("#slider2").easySlider({
				controlsBefore:	'<p id="controls2">',
				controlsAfter:	'</p>',		
				prevId: 'prevBtn2',
				nextId: 'nextBtn2'	
			});			
		});	
	</script>
	
<style type="text/css">

	body {
		background:#fff url(images/bg_body.gif) repeat-x;
		font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
		color:#333;
		line-height:180%;
		margin:0;
		padding:0;
		text-align:center;
	}
	h1{
		font-size:180%;
		font-weight:normal;
		margin:0;
		padding:20px;
		}
	h2{
		font-size:160%;
		font-weight:normal;
		}	
	h3{
		font-size:140%;
		font-weight:normal;
		}	
	img{border:none;}
	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:674px;
		}	

	#container{	
		margin:0 auto;
		position:relative;
		text-align:left;
		width:696px;
		background:#fff;		
		margin-bottom:2em;
		}	
	#header{
		height:80px;
		background:#5DC9E1;
		color:#fff;
		}				
	#content{
		position:relative;
		}			

/* Easy Slider */

	#slider{}	
	#slider ul, #slider li, #slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}	

	#slider2 li{ 
		background:#f1f1f1;
		}		
	#slider2 li h2{ 
		margin:0 20px;
		padding-top:20px;
		}	
	#slider2 li p{ 
		margin:20px;
		}						
		
	p#controls, p#controls2{
		margin:0;
		position:relative;
		} 
	
	#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ 
		display:block;
		margin:0;
		overflow:hidden;
		text-indent:-8000px;		
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:-160px;
		}	
	#nextBtn, #nextBtn2{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{  
		display:block;
		width:30px;
		height:77px;
		background:url(images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #nextBtn2 a{ 
		background:url(images/btn_next.gif) no-repeat 0 0;	
		}												

/* // Easy Slider */

</style>	
	
</head>
<body>

<div id="container">

	<div id="header">
		<h1>Easy Slider jQuery Plugin Demo - styled version</h1>
	</div>

	<div id="content">
	
		<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>
		
		
		<div id="slider2">
			<ul>				
				<li>
					<h2>What's Templatica anyway?</h2>
					<p>Templatica is a membership based template club where you get 
					<strong>full access to all templates</strong> in the <a href="http://templatica.com/templates">css template gallery</a> for a single and very affordable
					<strong>annual fee of $24!</strong><br />
					Yup, that's right! All of <a href="http://templatica.com/templates" title="CSS templates">this</a> plus <strong>all of the 
					templates released within one year from the day you join</strong>. No extra cost, no hidden fees!<br />		
					You also have a possibility of purchasing a <strong>single template for as low as $5</strong>.</p>
				</li>
				<li>
					<h2>Why is the fee so low?</h2>
					<p>I wanted to make premium templates <strong>available to as many of you as possible</strong>. 
					<a href="http://templatica.com/templates">Templates</a> are not only meant for commercial but for 
					<strong>educational purpose as well</strong>. I would like you to <a href="http://templatica.com/join">join</a>, 
					download templates, analyze the code and hopefully learn something new. <br/>
					For those who'd like to <strong>test the quality</strong> of the templates I suggest my <strong>single template purchase option</strong>.</p>
				</li>			
				<li>
					<h2>What Templatica offers</h2>	
					<p>Templatica offers static design templates with <strong>valid XHTML and CSS</strong>. 
					All templates are tested in<strong> Firefox Win, IE7, IE6, Opera</strong> on Windows 
					as well as <strong>Safari and Firefox</strong> on Mac. <br />
					Templates are <strong>highly customizable</strong>. The download package for each template 
					includes HTML, CSS, JavaScript files and related images.</p>
				</li>	
			</ul>
		</div>		
			
		<h3>Usage</h3>
	
<pre>$(document).ready(function(){	
$("#slider").easySlider({
	controlsBefore:	'&lt;p id="controls"&gt;',
	controlsAfter:	'&lt;/p&gt;',
	auto: true, 
	continuous: true
});
$("#slider2").easySlider({
	controlsBefore:	'&lt;p id="controls2"&gt;',
	controlsAfter:	'&lt;/p&gt;',	
	prevId: 'prevBtn2',
	nextId: 'nextBtn2'	
});			
});	</pre>	
	
	<h3>CSS</h3>
	
<pre>#slider{}	
#slider ul, #slider li, #slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li, #slider2 li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:696px;
	height:241px;
	overflow:hidden; 
	}	
	
p#controls, p#controls2{
	margin:0;
	position:relative;
	} 

#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ 
	display:block;
	margin:0;
	overflow:hidden;
	text-indent:-8000px;		
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:-160px;
	}	
#nextBtn, #nextBtn2{ 
	left:696px;
	}														
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{  
	display:block;
	width:30px;
	height:77px;
	background:url(images/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a, #nextBtn2 a{ 
	background:url(images/btn_next.gif) no-repeat 0 0;	
	}								</pre>	
		
		<p><a href="http://cssglobe.com/post/4004/jquery-plugin-easy-image-or-content-slider" title="read more about this jquery plugin">back to the article</a></p>
		
		<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>

	</div>

</div>

</body>
</html>